<template>
  <div class="tree">
    <div class="content-top">
      <span v-if="recordsData.length && !isShowChild" class="item-icon show-more-btn" @click="showMore"><a-icon type="caret-right"/></span>
      <span v-if="recordsData.length && isShowChild" class="item-icon show-more-btn" @click="showMore"><a-icon type="caret-down"/></span>
      <span v-if="!recordsData.length" class="item-icon"><a-icon type="file" /></span>
      <span class="item">代码<i>*</i></span>
      <span class="item">中文名称<i>*</i></span>
      <span class="add" @click.stop="$event => add($event, 'root')"><a-icon type="plus"/></span>
    </div>

    <template v-if="isShowChild">
        <tree-content
            :recordsData = "recordsData"
            :vm="this"
        ></tree-content>
    </template>

    <div class="add-modal" @click.stop="" :style="modalPosition" v-show="showAdd">
      <div class="title">
        <span class="w170">代码<i>*</i></span>
        <span class="w170">中文名称<i>*</i></span>
        <span>启用</span>
      </div>
      <div class="add-content">
        <span class="w170">
          <a-input :disabled="currentData.initialUsed" v-model="currentData.code" placeholder="请输入" />
        </span>
        <span class="w170">
          <a-input :disabled="currentData.initialUsed" v-model="currentData.name" placeholder="请输入" />
        </span>
        <span>
          <a-switch :disabled="currentData.initialUsed" v-model="currentData.status" default-checked size="small" />
        </span>
      </div>
      <div class="footer">
        <span class="cancel" @click="cancel">取消</span>
        <span class="save" @click="save">保存</span>
      </div>
      <div class="popover-arrow"></div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import common from "@cloudpivot/common/pc";
import { on } from "dingtalk-jsapi";
import treeContent from './tree-content.vue'
import { position } from "html2canvas/dist/types/css/property-descriptors/position";

@Component({
  name: "Tree",
  components: {
    treeContent
  },
})
export default class Tree extends Vue {
  @Prop({
    default: [],
  })
  recordsData!: any[];

  @Prop({
    default: false,
  })
  isEdit!: boolean;

  $isEdit:boolean = false


  isShowChild:boolean = false
  showMore(){
    this.isShowChild = !this.isShowChild
  }

  addNewPosition:any[] = this.recordsData // 新建的位置

  currentData: any = {
    name: "",
    code: "",
    status: true,
  };

  showAdd: boolean = false;
  cancel() {
    this.showAdd = false;
  }

  save(){
    if(this.currentData.name === ''){
      this.$message.error('中文名称不能为空！')
      return
    }

    if(!/^[-_a-zA-Z0-9]+$/.test(this.currentData.code)){
      this.$message.error('代码仅支持英文、数字及英文符号”-“和”_“')
      return
    }

    if(this.currentData.code.length > 50){
      this.$message.error('代码不能超过50个字')
      return
    }

    if(!/^[\u4e00-\u9fa5-_a-zA-Z0-9]+$/.test(this.currentData.name)){
      this.$message.error('中文名称仅支持中英文、数字及英文符号”-“和”_“')
      return
    }

    if(this.currentData.name.length > 50){
      this.$message.error('中文名称不能超过50个字')
      return
    }
    
    if(this.currentData.code === ''){
      this.currentData.code = 'code' + (Math.floor(Math.random() * 10000000)) + ((+new Date() + '').slice(-7))
    }
    
    if(this.$isEdit){
        this.addNewPosition = Object.assign(this.addNewPosition, this.currentData)
        this.currentData = {...this.oneData}
    }else{
        if(this.isAddSub){
            if(this.addNewPosition['children']){
               this.addNewPosition['children'].push(this.currentData) 
            }else{
                this.addNewPosition['children'] = [{...this.currentData}]
            }
        }else{
            this.addNewPosition.push(this.currentData)
            this.isShowChild = true
        }
    }

    this.data = JSON.parse(JSON.stringify(this.data))
    this.$emit('recordsDataChange', this.data)

    this.cancel()
  }

  modalPosition = {
    // left: "0px",
    top: "0px",
  };

  isAddSub:boolean = false // 添加的是子项
  add($event, type) {
    this.$isEdit = false
    const { x, y } = $event;
    this.modalPosition = {
      // left: x + "px",
      top: y + "px",
    };

    if(type==='root'){ // 在根新建字典
        this.addNewPosition = this.data
        this.isAddSub = false
    }else{
        this.isAddSub = true
        this.addNewPosition = type
    }

    this.currentData  = {
        ...this.oneData
    }
    this.currentData.code = 'code' + (Math.floor(Math.random() * 10000000)) + ((+new Date() + '').slice(-7))

    this.showAdd = true;
  }
  edit($event, record) {
    this.$isEdit = true
    console.log(record)
    const { x, y } = $event;
    this.modalPosition = {
      // left: x + "px",
      top: y + "px",
    };
    this.addNewPosition = record
    this.currentData  = {...record}
    this.showAdd = true;
  }

  oneData: any = {
    name: "",
    code: "",
    status: true,
  };
  addMoreDatas: string = "";
  //   添加
  addOne(options) {
    let oneData: any = {};
    if (options) {
      oneData = { ...options };
    } else {
      oneData = { ...this.oneData };
    }
    oneData._id = Math.random() + "";
    oneData.isNew = true
    this.data.push(oneData);
  }

  data: any[] = [];
  created(){
    this.data = this.recordsData
    this.$isEdit = this.isEdit

    let _this = this
    document.onclick = function(e){
      if(_this.showAdd){
        _this.showAdd = false
      }
    }
  }
  @Watch('isEdit')
  onIsEditChange(){
    this.$isEdit = this.isEdit
  }

  @Watch('recordsData')
  onRecordsDataChange(){
    this.data = this.recordsData
  }
}
</script>
<style lang="less" scoped>
.show-more-btn{
    cursor: pointer;
}

.popover-arrow {
  position: absolute;
  display: block;
  width: 8.48528137px;
  height: 8.48528137px;
  background: transparent;
  border-style: solid;
  border-width: 4.24264069px;
  top: -4px;
  border-color: #fff transparent transparent #fff;
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.1);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  margin-left: -40px;
}
.tree {
  .content-top {
    position: relative;
    padding-left: 16px;
    i {
      font-size: 12px;
    }
    .item {
      i{
        color: red;
      }
    }
    .add {
      color: #4c80ff;
      cursor: pointer;
    }
    span.item {
      margin-right: 118px;
    }
    span.icon-wrapper {
      position: absolute;
      left: 0;
      transform: rotate(90deg);
    }
  }
}

.add-modal {
  width: 404px;
  position: fixed;
  // left: 0;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  padding: 16px;
  // margin-left: -160px;
  margin-top: 20px;
  span.w170 {
    width: 170px;
    display: inline-block;
    padding-right: 12px;
    i {
      color: red;
    }
  }
  .add-content {
    margin-top: 8px;
  }
  .footer {
    margin-top: 20px;
    text-align: right;
    span {
      width: 44px;
      height: 24px;
      line-height: 24px;
      background: #ffffff;
      border: 1px solid #d9d9d9;
      text-align: center;
      display: inline-block;
      border-radius: 4px;
      cursor: pointer;
      &.save {
        background: #17BC94;
        border-color: #17BC94;
        color: #fff;
        margin-left: 8px;
      }
    }
  }
}

.no-show-more{
    transform: rotate(0) !important;
    left: 0;
}
</style>

<style lang="less">
.item-icon{
    display: inline-block;
    width: 16px;
    height: 28px;
    line-height: 28px;
    text-align: left;
    position: relative;
}
</style>
